const { resolve } = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'production', // development - 不压缩; production - 压缩; 默认压缩
  entry: "./src/main.js",
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          ie8: true
        }
      })
    ]
  },
  watch: true, //自动监听，修改后自动编译
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'js/built.js'
  },
  module: {
    rules: [
      // 兼容低版本浏览器
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env'
            ],
            plugins: [
              ['@babel/plugin-transform-runtime'],
              ['@babel/plugin-transform-modules-commonjs'] // 兼容ie8,代价是不能tree shaking
            ]
          }
        }
      },
      {
        // 文件名正则配对
        test: /\.less$/,
        // 先使用的loader放在数组的后面
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 文件名正则配对
        test: /\.css$/,
        // 先使用的loader放在数组的后面
        // 这里对css文件先使用css-loader翻译成css字符串
        // 而后使用style-loader参考该字符串新建一个style样式标签插入head标签中
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif|ico)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,// 小于8kb的图片以base64字符串方式存储
          name: '[hash:10].[ext]',// 缩短命名
          esModule: false,
          outputPath: 'images'
        }
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ //输出html文件1
      template: './src/page/index.html', // 本地html文件模板的地址
      filename: 'index.html', // 生成html文件的文件名，默认是index.html
      hash: true, // 是否开启 hash 混淆
      minify: {
        removeComment: true,
        collapseWhitespace: true
      }
    }),
    new HtmlWebpackPlugin({
      template: './src/page/details.html',
      filename: 'details.html',
      hash: true,
      minify: {
        removeComment: true,
        collapseWhitespace: true
      }
    }),
  ],
};